<template>
	<view>
		<u-navbar title="成员详情"  :autoBack="true">
			</u-navbar>
		<view class="container">
			<view class="user">
				<view class="left">
					<view class="avatar">
						<u--image :showLoading="true" :src="info.user.avatar_fullurl" width="120rpx" shape="circle"
							height="120rpx"></u--image>
					</view>
					<view class="name">
						<view class="name_1">
							<view class="name_1_1">{{info.realname||'-'}}</view>
							<view class="name_1_2">{{info.level.level_name}}</view>
						</view>
						<view class="user_id">
							<view>用户ID：</view>
							<view>{{info.partner_account}}</view>
						</view>
						<view class="time">
							{{$u.timeFormat(info.createtime*1000, 'yyyy-mm-dd')}}
						</view>
					</view>
				</view>
				<view class="right">
					<view class="num">{{info.total_achievement}}</view>
					<view class="text">总业绩</view>
				</view>
			</view>
			<view class="info">
				<!-- <view class="info_l">
					<view class="info_title">消费总额：</view>
					<view class="info_res"> 123123元</view>
				</view> -->
				<view class="info_l">
					<view class="info_title">推广数：</view>
					<view class="info_res">{{info.dre_num}}人</view>
				</view>
				<view class="info_l">
					<view class="info_title">姓名：</view>
					<view class="info_res"> {{info.realname||'-'}}</view>
				</view>
				<view class="info_l">
					<view class="info_title">性别：</view>
					<view class="info_res"> {{info.user.gender|sexFormat}}</view>
				</view>
				<view class="info_l">
					<view class="info_title">生日：</view>
					<view class="info_res"> {{info.user.birthday||'-'}}</view>
				</view>
				<view class="info_l">
					<view class="info_title">微信二维码：</view>
					<view class="info_res" v-if="info.user.qrcode_fullurl"> 
						<u--image :showLoading="true" :src="info.user.qrcode_fullurl" width="80px" height="80px"
						></u--image>
					</view>
					<view v-else>-</view>
				</view>
				<view class="info_l">
					<view class="info_title">地址：</view>
					<view class="info_res"> {{info.user.address||'-'}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		myteam_memberInfo_api
	} from '@/api/second.js'
	export default {
		data() {
			return {
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				info: {}
			}
		},
		filters: {
			sexFormat: function(value) {
				const data = {
					0: '未知',
					1: '男',
					2: '女',
				}
				return data[value];
			}
		},
		onLoad({
			id
		}) {
			this.getParterInfo(id);
		},

		methods: {
			getParterInfo(partnerid) {
				myteam_memberInfo_api({
					partnerid
				}).then(res => {
					this.info = res.data
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		margin: 40rpx;

		.user {
			background: #FFFFFF;
			box-shadow: 0rpx 12rpx 116rpx 0rpx rgba(196, 203, 214, 0.1036);
			border-radius: 48rpx 48rpx 48rpx 48rpx;
			opacity: 1;
			padding: 52rpx 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				display: flex;
				align-items: center;

				.avatar {
					margin-right: 12rpx;
				}

				.name {
					.name_1 {
						display: flex;
						align-items: center;

						.name_1_1 {
							font-size: 28rpx;
							font-weight: 400;
							color: #000000;
						}

						.name_1_2 {
							margin-left: 22rpx;
							height: 32rpx;
							line-height: 32rpx;
							font-size: 20rpx;
							color: #7677EB;
							border-radius: 616rpx 616rpx 616rpx 616rpx;
							opacity: 1;
							border: 1rpx solid #7677EB;
							padding: 0 6rpx;
						}
					}

					.user_id {
						padding: 8rpx 0;
						font-size: 24rpx;
						color: #9E9E9E;
						display: flex;
						align-items: center;
					}

					.time {
						color: #9E9E9E;
						font-size: 24rpx;
					}
				}
			}

			.right {
				display: flex;
				flex-direction: column;
				align-items: center;

				.num {
					font-size: 36rpx;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: 700;
					color: #7677EB;
				}

				.text {
					font-size: 20rpx;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: 700;
					color: #91929E;
				}
			}
		}

		.info {
			margin-top: 32rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 12rpx 116rpx 0rpx rgba(196, 203, 214, 0.1036);
			border-radius: 48rpx 48rpx 48rpx 48rpx;
			opacity: 1;
			padding: 40rpx 40rpx;
			display: flex;
			justify-content: space-between;
			flex-direction: column;

			.info_l {
				display: flex;
				align-items: center;
				padding: 20rpx 0;

				.info_title {
					width: 168rpx;
					text-align: right;
					font-size: 28rpx;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: 400;
					color: #91929E;
				}

				.info_res {
					flex: 1;
					font-size: 30rpx;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: 400;
					color: #0A1629;
				}
			}
		}
	}
</style>